// hooks(钩子)封装逻辑，提供响应式数据。
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import { useIntervalFn } from '@vueuse/shared'
import dayjs from 'dayjs'

// 数据懒加载函数
export const useLazyData = (apiFn) => {
  // 1. 被观察的对象
  const target = ref(null)
  // 2. 用于存放后台数据的变量
  const list = ref([])
  // stop             用于停止检测函数
  // target           被检测的元素
  // isIntersecting   布尔值，元素是否可见 true/false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可以，发送请求获取数据，并停止检测避免重复发送请求
      if (isIntersecting) {
        // console.log(target.value, '元素可见可以发请求了.....')
        // 调用 API 获取数据
        apiFn().then(({ result }) => {
          list.value = result
        })
        stop()
      }
    }
  )
  // 钩子函数返回---> 响应式数据（目标元素, 后台数据）
  return { list, target }
}

// 🔔 作业：倒计时效果
export const usePayTime = () => {
  const time = ref(0)
  const timeText = ref('')
  const { resume, pause } = useIntervalFn(() => {
    time.value--
    // 格式化后中文时间
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    if (time.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })
  const start = (number) => {
    time.value = number
    // 格式化后中文时间
    timeText.value = dayjs.unix(time.value).format('mm分ss秒')
    resume()
  }
  return { time, timeText, start }
}
